<template>
	<div class="right-cps-view">
		<div class="tbs-view">
			<el-button type="primary" class="active-btn-style">測定結果</el-button>
			<!-- -右侧框-{{ rightResultViewFlag }}-是否修改-{{ DataChange }} -->
		</div>
		<!-- content -->
		<div class="container">
			<tabs-result ref="tabsResult" :tableItemData="tableItemData" @change_D="change_D"
				@DataChangeFn="DataChangeFn" @isConfirmingFn="isConfirmingFn"></tabs-result>
		</div>

		<!-- footer -->
		<footer class="footer-view">
			<!-- <button v-show="isBtnShow">Cancel</button> -->
			<el-button v-show="$hasEditPermission('/BHView')" :disabled="tableItemData == 'no Data'"
				type="primary" @click="_save(true)">編集内容を保存</el-button>
			<el-button @click="onCloseClick" type="warning">
				{{ $t("message.public.close") }}
			</el-button>
		</footer>
	</div>
</template>

<script>
import tabs_result from "./tabs/Tab_3.vue";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";

export default {
	name: "TabsCompontens",
	props: ["tableItemData", "rightResultViewFlag"],
	data() {
		return {
			userData: getLocalStorage('userData'),
			is_D: true,

			//  数据是否修改过
			DataChange: false,
			isConfirming: false
		};
	},
	components: {
		"tabs-result": tabs_result,
	},
	watch: {},
	methods: {
		isConfirmingFn(e) {
			this.isConfirming = e;
		},
		DataChangeFn(e) {
			this.DataChange = e;
		},

		change_D(e) {
			console.log(e);
			this.is_D = e
		},
		_save(isSaveBtn) {
			// if (this.isConfirming) {
			// 	return
			// }
			this.isConfirming = true;
			this.$refs.tabsResult.AddThckDeterResApi(isSaveBtn);
		},
		onCloseClick() {
			this.$emit("onCloseClick", false);
		},
	},
	computed: {
	},
	created() { },
	mounted() {
		//  监听通知，是否有数据变更
		eventBus.$on('getBasicStyleCompontensCurrent_EventBus', () => {
			console.log('getBasicStyleCompontensCurrent_EventBus', '肉厚测定经历', 222);

			//	获取当前数据是否更改。
			//	右侧弹框未-不出-保存
			if (!this.rightResultViewFlag) {
				this.DataChange = false;
			}
			//	追加状态，定出保存
			// if (this.$refs.tabsResult.addDate != "") {
			// 	this.DataChange = true;
			// }

			this.$store.commit("changeIsCurrentNext", !this.DataChange);
		});

		//  接受通知唤起保存弹框
		eventBus.$on('EventBusBasicStyleCompontensSaveFn', () => {
			if (!this.rightResultViewFlag) {
				this.DataChange = false;
			}
			if(!this.$store.state.isCurrentFn){
				return
			}
			this._save();
		});
	},
	beforeDestroy() {
		eventBus.$off('getBasicStyleCompontensCurrent_EventBus');
		eventBus.$off('EventBusBasicStyleCompontensSaveFn');
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-cps-view {
	width: 100%;
	height: calc(100% - 2px);
	padding: 16px 0;
	border: 1px solid #c3c3c3;
	position: relative;
}

.tbs-view {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 16px;

	button {
		width: 50% !important;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #d3d3d3;
		border-right: 0 none;
		cursor: pointer;
		border-radius: 0;
	}



	button:last-child {
		border-right: 1px solid #d3d3d3;
	}

	.active-btn-style {
		// background: #106ebe;
		// color: #fff;
	}
}

.container {
	width: 100%;
	height: calc(100% - 32px);
	// overflow-y: scroll;
	padding: 12px 8px 32px 16px;
}

.footer-view {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	background: #ffffff;

	button {
		min-width: 82px;
		height: 32px;
		line-height: 0;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
	}

	button:nth-child(1) {
		// background: #106ebe;
		// color: #fff;
		padding: 0 15px;
	}

	button:nth-child(2) {
		position: absolute;
		// background: #eb7421;
		// color: #fff;
		right: 0px;
	}
}
</style>